<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <!-- BEGIN 全局样式 -->
    <link rel="stylesheet" href="../../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <!--<link rel="stylesheet" href="../../../lib/tree-view/css/bootstrap-treeview.min.css">-->
    <link rel="stylesheet" href="../../../css/reset-diy.css" type="text/css">
    <link rel="stylesheet" href="../blacklist/black-red.css">
    <title>红名单设置</title>
</head>
<body>
<div class="container-fluid pt-20">
    <div id="content" class="center-block clearfix">
        <div class="search eleWidth  clearfix mb-15">
            <!--<button class="f-r btn b-666 c-white"><span class="glyphicon glyphicon-search"></span> 搜索</button>-->
            <div class="pos-r"><span class="icon-search glyphicon glyphicon-search"></span><input
                    class="input-search form-control" type="text" placeholder="搜索"></div>
        </div>
        <!--内容-->
        <section id="content-child">
            <div id="left" class="eleWidth clearfix pos-r">
                <header class="header pos-a">
                    <div class="title-type"><span style="margin-left:-30px;">职务</span></div>
                    <div class="title-peopleName">人名</div>
                </header>

                <div class="left-type f-l">
                    <ul id="tree"></ul>
                </div>

                <!-- left.name -->
                <div class="left-name f-l pos-r">
                    <span class="btn-close glyphicon glyphicon-remove invisible"></span>
                    <ul class='peopleName search invisible'></ul>
                    <ul class="peopleName staff text-c"></ul>
                </div>
            </div>


            <div id="right">
                <header class="header">红名单</header>
                <div class="blacklist text-c"></div>
            </div>

            <div class="center-button pos-r">
                <div class="pos-center top50" style="margin-top:-48px">
                    <div>
                        <button class="btn-add btn btn-success pl-25 pr-25"><span
                                class="glyphicon glyphicon-arrow-right"></span></button>
                    </div>
                    <div class="mt-30">
                        <button class="btn-remove btn btn-danger pl-25 pr-25">
                            <span class="glyphicon glyphicon-arrow-left"></span>
                        </button>
                    </div>
                </div>
            </div>
        </section>


    </div>


</div>

<!--核心脚本sss-->
<script src="../../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
<script src="../../../js/excanvas.min.js"></script>
<script src="../../../js/respond.min.js"></script>
<![endif]-->
<!--加密插件sss 必须放在jquery.myPlugIn_v1.0.js前面-->
<script src="../../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
<!--加密插件eee-->

<script src="../../../js/bootstrap.min.js" type="text/javascript"></script>
<!--<script src="../../../lib/tree-view/js/bootstrap-treeview.min.js"></script>-->

<script src="../../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../lib/laypage/1.2/laypage.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="../../../lib/Tdrag/Tdrag.min.js"></script>-->
<script src="../../../js/work-box.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>


<script>
    /**
     * 黑红名单内容替换时,需要修改的地方
     1 修改title
     2 右边的header
     3 getStaffList -> e.data.black.items : 修改为对应字段
     4 getBlacklist -> e.data.black.items : 修改为对应字段
     */

    var T = new Extend_base();
    var status = 2;  // 0 正常 1 红名单 2 黑名单 (渲染的灰色字体)
    var getData = "red-list/list"; //获取的接口
    var createData = "red-list/create"; // 新增的接口
    var deleteData = "red-list/delete"; // 删除的接口
    var hintText = "没有可加入红名单的人员"; // 列表为空的提示文字

    jQuery(document).ready(function () {
        function RedList() {
            this.data = []; // 职位名称(职务表)
            this.addBlackList = []; // 新增黑名单人员
            this.removeBlackList = []; // 被移除的黑名单人员
            this.init();
        }

        RedList.prototype = {
            init: function () {
                this.getStaffList();
                this.clickEvent();
            },
            clickEvent: function () {
                var _this = this;
                // 职位点击
                $("#tree").on("click", "li", function () {
                    $(this).addClass("active").siblings().removeClass("active");
                    $(this).find(".menus").addClass("glyphicon-menu-down").removeClass("glyphicon-menu-right");
                    $(this).siblings().find(".menus").removeClass("active glyphicon-menu-right glyphicon-menu-down").addClass("glyphicon-menu-right");
                    _this.renderPeopleName($(this).data("id"));
                });

                // 人名点击
                $(".peopleName,.blacklist").on("click", "li", function () {
                    $(this).children(".badge").toggleClass("invisible");
                });

                // 加入
                $(".btn-add").on("click", function () {
                    _this.addBlackList = []; // await add to blacklist "id"
                    var awaitList = []; // 待加入黑名单ele
                    var lis = $("ul.staff li,ul.search li");

                    lis.each(function (i, v) {
                        if (!$(v).children(".badge").hasClass("invisible")) {
                            _this.addBlackList.push($(v).data("id"));
                            awaitList.push($(v));
                        }
                    });

                    _this.submitAdd(awaitList);
                });

                // 移除
                $(".btn-remove").on("click", function () {
                    _this.removeBlackList = [];
                    var awaitList = []; // 待移除黑名单ele
                    var lis = $(".blacklist li");
                    lis.each(function (i, v) {
                        if (!$(v).children(".badge").hasClass("invisible")) {
                            _this.removeBlackList.push($(v).data("id"));
                            awaitList.push($(v));
                        }
                    });
                    _this.submitRemove(awaitList);
                });

                // 搜索
                $('.input-search').on('input', function () {
                    if ($(this).prop('comStart')) return;    // 中文输入过程中不截断
                    // 非中文输入
                    var value = $(this).val();
                    var that = $(this);
                    if (value != "") {
                        _this.filterSearch(value);
                    } else {
                        $("ul.search").html("<li>请输入查找关键字</li>");
                    }

                }).on('compositionstart', function () {
                    $(this).prop('comStart', true);
                    // console.log('中文输入：开始');
                }).on('compositionend', function () {
                    $(this).prop('comStart', false);
                    // console.log('中文输入：结束');
                    _this.filterSearch($(this).val());
                }).on("focus", function () {
                    $("ul.search").removeClass("invisible searching").html("<li>请输入查找关键字</li>");
                    $(".btn-close").removeClass('invisible');
                }).on("blur", function () {
                    setTimeout(function () {
                        var search = $("ul.search");
                        if (!search.hasClass("searching")) {
                            search.addClass("invisible");
                            $(".btn-close").addClass("invisible");
                        }
                    }, 150);
                    $(this).val("");
                });

                $(".btn-close").on("click", function () {
                    $(this).addClass("invisible");
                    $("ul.search").addClass("invisible");
                });

                // 结果的操作
                $("ul.search").on("click", function () {
                    $(this).addClass("searching");
                });

            },
            getStaffList: function (update) {
                var _this = this;
                T.ajaxSecret(url_join(getData), "post", {}, function (e) {
                    var data = e.data.staff;
                    // _this.initTheTree(_this.rename(data)); // 创建树形菜单
                    _this.renderJob(data);
                    _this.data = data;
                    _this.renderBlacklist(e.data.red.items);
                });
            },
            renderJob: function (data) {
                var tree = $("#tree");
                tree.html("");
                $.each(data, function (i, v) {
                    var li = $("<li data-id='" + v.id + "'>" + v.name + "<span class='menus glyphicon glyphicon-menu-right'></span></li>");
                    tree.append(li);
                });
            },
            renderPeopleName: function (id) {
                var _this = this;
                var peopleName = $("ul.staff");
                peopleName.html("");
                /**
                 * 0 正常
                 * 1 红名单
                 * 2 黑名单
                 * */
                $.each(_this.data, function (i, v) {
                    // 在数组中找到对应的数据
                    if (id == v.id) {
                        if (v.staff.length > 0) {
                            $.each(v.staff, function (j, k) {
                                var li = "";
                                if (k.status == 0) {
                                    li = $('<li data-id="' + k.id + '"><span class="teacherName">' + k.username + '</span><span class="badge invisible"> </span></li>');
                                } else if (k.status == status) {
                                    li = $('<li data-id="' + k.id + '"><span class="teacherName c-999">' + k.username + '</span><span class="badge invisible"> </span></li>');
                                }
                                li && peopleName.append(li);
                            });
                            // 全是黑名单
                            if (peopleName.is(":empty")) {
                                var li = $('<li><span class="teacherName">' + hintText + '</span><span class="badge invisible"> </span></li>');
                                peopleName.html(li);
                            }
                        } else {
                            var li = $('<li><span class="teacherName">' + hintText + '</span><span class="badge invisible"> </span></li>');
                            peopleName.html(li);
                        }
                    }

                });
            },
            filterSearch: function (value) {
                var _this = this, arr = [];
                $.each(this.data, function (i, v) {
                    $.each(v.staff, function (k, n) {
                        if (n.username.indexOf(value) != -1) {
                            console.log("找到: ", n.username);
                            var obj = {
                                staff: _this.data[i].name,
                                id: n.id,
                                status: n.status,
                                username: n.username
                            };
                            arr.push(obj);
                        }
                    });
                });
                _this.renderSearch(arr);
            },
            renderSearch: function (data) {
                var _this = this;
                // console.log("data: ",data);
                if (data.length > 0) {
                    var ul = $("ul.search");
                    var lis = $("<div></div>");
                    $.each(data, function (j, k) {
                        var li = "";
                        if (k.status == 0) {
                            li = $('<li data-id="' + k.id + '"><span class="teacherName">' + k.username + '</span><span class="badge invisible"> </span></li>');
                        } else if (k.status == status) {
                            li = $('<li data-id="' + k.id + '"><span class="teacherName c-999">' + k.username + '</span><span class="badge invisible"> </span></li>');
                        }
                        li && lis.append(li);
                    });
                    ul.html(lis);
                } else {
                    // 找不到匹配的结果
                    $("ul.search").html('<li>找不到匹配的结果</li>');
                }

                // 全是黑名单,列表为空的提示
                if ($("ul.search li").length === 0){
                    $("ul.search").html('<li>找不到匹配的结果</li>');
                }
            },


            getBlacklist: function () {
                var _this = this;
                T.ajaxSecret(url_join(getData), "post", {}, function (e) {
                    var data = e.data.red.items;
                    _this.renderBlacklist(data);
                });
            },
            renderBlacklist: function (data) {
                var blacklist = $(".blacklist");
                blacklist.html("");
                $.each(data, function (i, v) {
                    if (data.length > 0) {
                        var li = $('<li data-id="' + v.id + '"><span class="teacherName">' + v.username + '</span><span class="badge invisible"> </span></li>');
                    } else {
                        var li = $("<div>列表为空</div>");
                    }
                    blacklist.append(li);
                });
                $("#tree li").eq(0).trigger("click");
            },

            rename: function (data) {
                // 普通数据制作树形菜单
                var tree = [];
                for (var i = 0; i < data.length; i++) {
                    var obj = {
                        id: data[i].id,
                        text: data[i].name,
                        nodes: []
                    };

                    for (var j = 0; j < data[i].staff.length; j++) {
                        var nodes = {
                            id: data[i].staff[j].id,
                            text: data[i].staff[j].username
                        }
                        obj.nodes.push(nodes);
                    }
                    tree.push(obj);
                }
                return tree;
            },
            initTheTree: function (data) {
                var _this = this;
                $('#tree').treeview({
                    // collapseIcon: "glyphicon glyphicon-folder-open", //节点被折叠时显示的图标
                    // expandIcon: "glyphicon glyphicon-folder-close",
                    // emptyIcon: "glyphicon glyphicon-file", //当节点没有子节点的时候显示的图标
                    // backColor: "#ccc",
                    selectedColor: "#fff",
                    showBorder: true,
                    data: data,
                    onNodeSelected: function (event, data) {
                        // _this.getUnit(data.id);
                    }
                });
            },

            submitAdd: function (awaitList) {
                var _this = this;
                T.ajaxSecret(url_join(createData),
                    "post",
                    {staff_ids: _this.addBlackList},
                    function (res) {

                        $.each(awaitList, function (j, k) {
                            for (var key in _this.data) {
                                T.objectFilter(_this.data[key].staff, "id", k.data("id"));
                            }
                            k.remove();
                        });
                        $("ul.search,.btn-close").addClass("invisible"); // 隐藏搜索结果
                        _this.getBlacklist();
                    }, function (res) {
                        var data = res.data;
                        $.each(awaitList, function (j, k) {
                            var flag = false;
                            for (var i in data) {
                                if (k.data("id") == i) {
                                    flag = true;
                                }
                            }
                            if (!flag) {
                                // console.log("移除前: ", _this.data);
                                _this.data = T.removeArrayForValue(_this.data, k.data("id"));
                                // console.log("移除后: ", _this.data);
                                k.remove();
                            }
                        });
                        _this.getBlacklist();
                    }
                );
            },
            submitRemove: function (awaitList) {
                var _this = this;
                T.ajaxSecret(url_join(deleteData),
                    "post",
                    {staff_ids: _this.removeBlackList},
                    function (res) {
                        _this.removeEle(awaitList); // Remove blacklist people
                        _this.getStaffList("update");
                    }, function (res) {
                        var data = res.data;
                        _this.getBlacklist();
                    }
                );
            },

            removeEle: function (eleArr) {
                for (var i in eleArr) {
                    eleArr[i].remove();
                }
            },
        };
        new RedList();
    });
</script>
</body>
</html>
